<template>
  <div :id="id" style="width: 100%; height: 100%" :ref="id"></div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
  name: 'QrCode',
  data () {
    return {
      qrcode: ''
    }
  },
  props: {
    id: {
      type: String,
      require: true
    },
    text: {
      type: String,
      default: 'http://127.0.0.1:5173/'
    },
    width: {
      type: String,
      default: '128'
    },
    height: {
      type: String,
      default: '128'
    },
    colorDark: {
      type: String,
      default: '#000000'
    },
    colorLight: {
      type: String,
      default: '#ffffff'
    }
  },
  watch: {
    text (newText) {
      this.createQrCode()
    }
  },
  mounted () {
    this.createQrCode()
  },
  methods: {
    createQrCode () {
      if (this.qrcode) {
        this.$refs[this.id].innerHTML = ''
      }
      this.qrcode = new QRCode(this.$refs[this.id], {
        text: this.text,
        width: this.width,
        height: this.height,
        colorDark: this.colorDark,
        colorLight: this.colorLight,
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    updateCode () {
      this.qrcode.makeCode('http://127.0.0.1:5173/')
    }
  }
}
</script>

<style>
</style>